<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假系统主页</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f7fa; /* 页面背景：浅灰 */
        }

        #app {
            display: flex;
            height: 100vh;
        }

        .sidebar {
            width: 260px;
            background-color: #3c3f41; /* 菜单背景：深灰 */
        }

        .el-menu {
            background-color: #3c3f41; /* 菜单背景：深灰 */
            border-right: 1px solid #2f3133; /* 菜单边框：更深的灰 */
        }

        .el-menu-item {
            color: #b0b0b0; /* 菜单项默认颜色：浅灰 */
            font-weight: 500;
        }

        .el-menu-item:hover {
            color: #ffffff; /* 悬停字体颜色：白色 */
            background-color: #4a4d50; /* 悬停背景：略浅的灰 */
        }

        .el-menu-item.is-active {
            color: #ffc107; /* 高亮颜色：金色 */
            background-color: #4a4d50; /* 选中背景：略浅的灰 */
        }

        .el-menu-item .el-icon {
            color: #b0b0b0; /* 默认图标颜色 */
        }

        .el-menu-item.is-active .el-icon {
            color: #ffc107; /* 高亮图标颜色：金色 */
        }

        .content {
            flex: 1;
            padding: 20px;
            background-color: #ffffff; /* 主内容背景：白色 */
        }

        #main-content {
            width: 100%;
            height: calc(100vh - 50px);
            border: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 侧边栏 -->
    <el-aside class="sidebar">
        <el-menu
                :default-active="activeMenu"
                class="el-menu-vertical-demo"
                background-color="#3c3f41"
                text-color="#b0b0b0"
                active-text-color="#ffc107">

            <!-- 渲染普通菜单项 -->
            <el-menu-item v-for="item in menuItems" :key="item.index" v-if="!item.children" :index="item.index"
                          @click="navigate(item.page)">
                {{ item.label }}
            </el-menu-item>

            <!-- 渲染管理模块子菜单 -->
            <el-submenu v-for="item in menuItems" :key="item.index" :index="item.index" v-if="item.children">
                <template #title>{{ item.label }}</template>
                <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.index"
                              @click="navigate(subItem.page)">
                    {{ subItem.label }}
                </el-menu-item>
            </el-submenu>

        </el-menu>


    </el-aside>

    <el-container>
        <el-header style="text-align: right; font-size: 24px">
            <el-dropdown style="text-align: right; font-size: 24px">
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{ user.fullname }}</span>
        </el-header>

        <!-- iframe 加载页面 -->
        <el-main>
            <iframe id="main-content" src="welcome.html"></iframe>
        </el-main>
    </el-container>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted() {
            const loginMessage = sessionStorage.getItem("loginMessage");
            if (loginMessage) {
                // 显示登录成功消息
                this.$message({
                    message: loginMessage,
                    type: "success",
                });
                // 清除消息，确保只执行一次
                sessionStorage.removeItem("loginMessage");
            }
            ;

            this.getInfo();
            const radio = this.getQueryParameter('radio');

            if (radio) {
                this.userRole = parseInt(radio, 10);  // 确保 'userRole' 是数字
            } else {
                console.error('没有找到 radio 参数');
                this.userRole = 0; // 默认值，或者其他合适的值
            }
            console.log("User Role:", this.userRole);  // 输出 userRole
            console.log("Menu Items:", this.menuItems); // 确认菜单项是否生成
            //
        },
        data() {
            return {
                activeMenu: '1', // 默认选中的菜单项
                userRole: '',//用户类别，用于操作菜单栏
                dialogVisible: false,
                student: {
                    stuID: '',
                    classID: '',
                    stuName: '',
                    sex: "",
                    address: "",
                    stuTel: "",
                    contact: "",
                    contacTel: ""
                },
                user: {
                    userid: '',
                    fullname: '',
                    password: '',
                    telephone: ''
                },
                usercopy: {
                    userid: '',
                    fullname: '',
                    password: '',
                    telephone: ''
                },
            };
        },
        computed: {
            menuItems() {
                console.log("当前的 userRole:", this.userRole);
                if (this.userRole === 3) {
                    return [
                        {index: '1', label: '网上请假系统', page: 'welcome.html'},
                        {
                            index: '2',
                            label: '管理模块',
                            children: [
                                {index: '2-1', label: '学生管理', page: 'student.html'},
                                {index: '2-2', label: '班级管理', page: 'classes.html'},
                                {index: '2-3', label: '课程管理', page: 'course.html'},
                                {index: '2-4', label: '辅导员管理', page: 'instructor.html'},
                                {index: '2-5', label: '二级学院管理', page: 'department.html'},
                                {index: '2-6', label: '用户管理', page: 'department.html'}
                            ]
                        },

                        {index: '4', label: '发起请假审批', page: 'studentLeave.html'},
                        {index: '5', label: '请假信息管理', page: 'instructorLeave.html'},
                        {index: '6', label: '修改个人信息', page: 'info.html'},
                    ];
                } else if (this.userRole === 6) {
                    return [
                        {index: '1', label: '网上请假系统', page: 'welcome.html'},
                        {
                            index: '2',
                            label: '管理模块',
                            children: [
                                {index: '2-1', label: '学生管理', page: 'student.html'},
                                {index: '2-2', label: '班级管理', page: 'classes.html'},
                                {index: '2-3', label: '课程管理', page: 'course.html'}
                            ]
                        },

                        {index: '4', label: '请假信息管理', page: 'instructorLeave.html'},
                        {index: '5', label: '修改个人信息', page: 'info.html'},
                    ];
                } else if (this.userRole === 9) {
                    return [

                        {index: '2', label: '网上请假系统', page: 'welcome.html'},
                        {index: '3', label: '修改个人信息', page: 'info.html'},
                        {index: '4', label: '发起请假审批', page: 'studentLeave.html'}
                    ];
                }
            }
        },


        methods: {
            getInfo() {
                axios.get('http://localhost:8080/user/info')
                    .then(result => {
                        this.user = result.data.data;
                        this.usercopy=user;
                        console.log(this.user)
                    });
            },
            editTouch() {
                location.href = `info.html?user=${userString}`;
            },
            logout() {
                console.log(12345)
                axios.post('http://localhost:8080/user/logout')
                    .then(result => {
                        console.log(result)
                        if (result.data.msg === 'success') {
                            location.href = "login.html";
                        }
                    });
            },
            getQueryParameter(name) {
                const params = new URLSearchParams(window.location.search);
                return params.get(name);
            },
            goback(){
                location.href = "info.html";
            },
            navigate(page) {
                // 更新 iframe 的 src，加载新的页面
                document.getElementById('main-content').src = page;
                this.activeMenu = page;
            }
        }
    });
</script>
</body>
</html>
